<template>
	<div>
		<div style="display: flex;display: flex;align-items: center;justify-content: center;">
			<el-card style="width: 1500px;">
				<div style="display: flex;display: flex;align-items: center;justify-content: center; width: 1500px;">
					<!-- <el-button type="primary" round>插入疾病</el-button> -->
					<!-- <el-button type="primary" round>编辑疾病与其他实体的关系</el-button> -->
					<!-- <el-button type="primary" round>警告按钮</el-button> -->
					<div>疾病数据</div>
				</div>
			</el-card>
		</div>

		<el-container>
			<el-main>
				<div style="padding-top: 30px;">
					<el-table :data="tableData" border style="width: 100%;">
						<!-- <el-table-column fixed prop="date" label="日期" width="150">
			</el-table-column> -->
						<el-table-column prop="name" label="疾病名" show-overflow-tooltip width="160">
						</el-table-column>
						<el-table-column prop="desc" label="简介" show-overflow-tooltip width="220">
						</el-table-column>
						<el-table-column prop="cause" label="病因" show-overflow-tooltip width="220">
						</el-table-column>
						<el-table-column prop="prevent" label="预防措施" show-overflow-tooltip width="320">
						</el-table-column>
						<el-table-column prop="cure_lasttime" label="治疗周期" show-overflow-tooltip width="100">
						</el-table-column>
						<el-table-column prop="cure_way" label="治疗方式" show-overflow-tooltip width="150">
						</el-table-column>
						<el-table-column prop="cured_prob" label="治疗概率" show-overflow-tooltip width="60">
						</el-table-column>
						<el-table-column prop="easy_get" label="易感人群" show-overflow-tooltip width="180">
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="120">
							<template slot-scope="scope">
								<el-button @click="dialogFormVisible = true" type="text" size="small">添加关系</el-button>
								<el-button @click="deleteOne(scope.row)" type="text" size="small">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<el-row style="padding-top: 20px;">
					<el-col style="text-align:center">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
							layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="10"
							:page-sizes="[10, 20, 30, 40, 50, 100]">
						</el-pagination>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
		<el-dialog title="编辑该节点的关系" :visible.sync="dialogFormVisible">
		  <el-form :model="form">
		    <el-form-item label="新增建议食物" :label-width="formLabelWidth">
		      <el-input v-model="form.foodname1" autocomplete="off"></el-input>
		    </el-form-item>
			<el-form-item label="新增不建议食物" :label-width="formLabelWidth">
			  <el-input v-model="form.foodname2" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="新增需要检查" :label-width="formLabelWidth">
			  <el-input v-model="form.needcheck" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="新增所属科室" :label-width="formLabelWidth">
			  <el-input v-model="form.belongdepartment" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="新增建议药品" :label-width="formLabelWidth">
			  <el-input v-model="form.recommanddrug" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="新增表现症状" :label-width="formLabelWidth">
		      <el-input v-model="form.hassymptom" autocomplete="off"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		created() {
			this.setPageNum();
			this.getDataList(1, this.pSize);
		},
		data() {
			return {
				tableData: [],
				total: 8807, //总条数
				pSize: 10, //默认10条
				dialogFormVisible: false,
				form: {
					foodname1: '',
					foodname2: '',
					needcheck:'',
					belongdepartment:'',
					recommanddrug:'',
					hassymptom:''
				},
				formLabelWidth: '120px'
			};
		},
		mounted() {
			document.title = "疾病后台"
		},
		methods: {
			setPageNum() {
				const _this = this;
				_this.$http.post('admin/diseaseNum').then(function(resp) {
					if (resp.data.code == 200) {
						_this.total = resp.data.data;
					} else {
						console.log("没查到总页数");
					}
				})
			},
			getDataList(index, pageSize) {
				// 分页获取所有的疾病
				const _this = this;
				var params = new URLSearchParams();
				params.append("page", index);
				params.append("size", pageSize);
				_this.$http.post('admin/diseasePage', params).then(function(resp) {
					if (resp.data.code == 200) {
						_this.tableData = resp.data.data;
					} else {
						console.log("没查到");
					}
				})

			},
			handleSizeChange(val) {
				const _this = this;
				// console.log('每页' + val + ' 条');
				_this.pSize = val;
				_this.getDataList(1, val);
			},
			handleCurrentChange(val) {
				const _this = this;
				// console.log('当前页: ' + val);
				_this.getDataList(val, _this.pSize);
			},
			// editOne(row) {
			// 	this.$prompt('请输入邮箱', '提示', {
			// 		confirmButtonText: '确定',
			// 		cancelButtonText: '取消',
			// 		inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
			// 		inputErrorMessage: '邮箱格式不正确'
			// 	}).then(({
			// 		value
			// 	}) => {
			// 		this.$message({
			// 			type: 'success',
			// 			message: '你的邮箱是: ' + value
			// 		});
			// 	}).catch(() => {
			// 		this.$message({
			// 			type: 'info',
			// 			message: '取消输入'
			// 		});
			// 	});
			// },
			deleteOne(row) {
				this.$confirm('此操作将永久删除该疾病, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
				// console.log(row.name);
			}
		}
	}
</script>

<style>
	.el-header {
		padding: 0 0px;
		box-sizing: border-box;
		flex-shrink: 0;
	}
</style>